<template>
  <div class="index-header-root">
    <div class="header-project-router">
      <el-tooltip content="《Blossom》一款作者开发的双链笔记软件">
        <div @click="() => { toView('https://www.wangyunf.com/blossom-doc/index') }">
          <img src="@/assets/imgs/blossom/blossom_logo.png" style="width: 25px;">
        </div>
      </el-tooltip>

      <el-tooltip content="作者个人博客">
        <div @click="() => { toView('https://www.wangyunf.com/blossom/#/home') }">
          <img src="@/assets/imgs/guardcat/guardcat_logo2.jpg" style="width: 25px;">
        </div>
      </el-tooltip>
      <!-- <div>
        <img src="@/assets/imgs/dancidance/dancidance_logo.png" style="width: 20px;">
      </div> -->
    </div>

    <div class="header-right">
      <div style="padding-bottom: 2px;">
        <el-icon size="20">
          <Refresh class="header-custom-icon" @click="getRouteIds()" />
        </el-icon>
      </div>
      <!-- 选择服务集群 -->
      <div class="appname-select-container">
        <el-select v-model="curServiceId" :placeholder="serviceIdsPlaceholder" @change="serviceChangeHandler"
          :loading="serviceIdsLoding" loading-text="正在查询集群名称...">
          <el-option v-for="item in serviceIds" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <!-- 选择环境 -->
      <div class="env-radio-container">
        <el-radio-group size="small" v-model="curEnvName" @change="envChangeHandler">
          <el-radio-button label="LOC" />
          <el-radio-button label="DEV" />
          <el-radio-button label="PRD" />
        </el-radio-group>
      </div>

      <!-- CPU图标, 显示服务端配置 -->
      <div>
        <el-icon size="23">
          <el-popover placement="bottom-start" :width="400" trigger="hover" :show-after="100" :hide-after="300">
            <template #reference>
              <Cpu class="header-custom-icon" />
            </template>
            <guardcatInfo />
          </el-popover>
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useEnvStore } from '@/stores/env'
import { useServiceStore } from '@/stores/service'
import { Refresh, Cpu } from '@element-plus/icons-vue'
import { routeIdsApi } from '@/api/gateway'
import guardcatInfo from '@/components/GuardcatInfo.vue'
import { toView } from '@/assets/utils/util'

const envStore = useEnvStore()
const serviceStore = useServiceStore()
const { env } = storeToRefs(envStore)
const { serviceId } = storeToRefs(serviceStore)

/**
 * serviceIdsLoding: 加载框
 * serviceIds: 集群名称下拉列表
 * curServiceId: 当前选中的后台服务 serviceId, 会从 store 中获取上次选择的 serviceId
 */
const serviceIdsLoding = ref<boolean>(true)
const serviceIdsPlaceholder = ref<string>('正在查询集群名称...')
const serviceIds = ref([{ value: '', label: '' }])
const curServiceId = ref<string>('')
/**
 * 当前选中的环境名称
 */
const curEnvName = ref<string>('')

/**
 * 切换环境 LOC/DEV/PRD
 */
const envChangeHandler = () => {
  envStore.setEnv(curEnvName.value);
}

const getRouteIds = () => {
  curServiceId.value = '';
  serviceIdsLoding.value = true;
  serviceIdsPlaceholder.value = '正在查询集群名称...';
  routeIdsApi().then(resp => {
    serviceIds.value = resp.data.map((ele: string) => {
      let serviceId: string = ele.substring(ele.indexOf('_') + 1);
      return {
        value: serviceId,
        label: serviceId
      };
    })
    setTimeout(() => {
      let storeServiceId = serviceId.value;;
      if (serviceIds.value.indexOf({ value: storeServiceId, label: storeServiceId })) {
        curServiceId.value = storeServiceId;
      } else {
        curServiceId.value = '';
      }
      serviceIdsPlaceholder.value = '请选择集群';
      serviceIdsLoding.value = false;
    }, 500);
  }).catch(() => {
    curServiceId.value = '';
    serviceIdsPlaceholder.value = '集群查询失败!';
  })
}


/**
 * 下拉列表选择服务
 */
const serviceChangeHandler = () => {
  serviceStore.setServiceId(curServiceId.value)
}

onMounted(() => {
  getRouteIds();
  curEnvName.value = env.value.envName;
  envChangeHandler();
})

</script>

<style scoped lang="scss">
.index-header-root {
  @include flex(row, space-between, flex-end);
  @include box(100%, 100%);

  .header-project-router {
    @include flex(row, flex-start, center);

    &>div {
      @include flex(row, center, center);
      @include box(30px, 30px);
      margin-right: 10px;
      background-color: var(--el-border-color);
      border-radius: 50%;
      transition: 0.3s;
      cursor: pointer;

      &:hover {
        box-shadow: var(--xz-box-shadow-dark);
      }
    }
  }

  .header-right {
    @include flex(row, flex-end, flex-end);

    &>div {
      @include flex(row, center, center);
      margin: 0 5px;
      color: var(--el-text-color-secondary);
    }

    .appname-select-container,
    .env-radio-container {
      @include flex(row, space-between, center);
    }
  }

}

.header-custom-icon {
  cursor: pointer;
}
</style>